<!--绘制图形-->
<!--Draw-->
<template>
  <div>
    <div id="map" class="mapC"></div>
    <div class="select_c">
      <el-select v-model="value" placeholder="请选择！" @change="selectChange">
          <el-option
          v-for="(item, index) in selecetData"
          :key="index"
          :label="item.label"
          :value="item.value">
          </el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import 'ol/ol.css'
import Draw, {
  createBox,
  createRegularPolygon
} from 'ol/interaction/Draw'
import Map from 'ol/Map'
import Polygon from 'ol/geom/Polygon'
import View from 'ol/View'
import XYZ from 'ol/source/XYZ'
// import Tile from 'ol/layer/Tile'
import {Vector as VectorSource} from 'ol/source'
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer'
export default {
  name: 'index',
  data () {
    return {
      value: '',
      map: null,
      raster: null,
      source: null,
      draw: null,
      vector: null,
      selecetData: [
        {
          label: 'None',
          value: 'None'
        },
        {
          label: 'Circle',
          value: 'Circle'
        },
        {
          label: 'Star',
          value: 'Star'
        },
        {
          label: 'Square',
          value: 'Square'
        },
        {
          label: 'Box',
          value: 'Box'
        }
      ]
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      // this.raster = new TileLayer({
      //   source: new OSM()
      // })
      this.raster = new TileLayer({
        name: 'map1',
        title: 'map1',
        source: new XYZ({
          url: '/mapServe/tdt/map/{z}/{x}/{y}.png'
        }),
        visible: true
      })
      var raster2 = new TileLayer({
        name: 'mapi2',
        title: 'mapi2',
        source: new XYZ({
          url: '/mapServe/tdt/mapi/{z}/{x}/{y}.png'
        }),
        visible: true
      })

      this.source = new VectorSource({wrapX: false})

      this.vector = new VectorLayer({
        source: this.source
      })
      this.map = new Map({
        layers: [this.raster, raster2, this.vector],
        target: 'map',
        view: new View({
          center: [108.2, 29.07],
          zoom: 4,
          projection: 'EPSG:4326'
        })
      })
    },
    selectChange (val) {
      this.map.removeInteraction(this.draw)
      this.getdrawD(val)
    },
    getdrawD (value) {
      if (value !== 'None') {
        var geometryFunction
        if (value === 'Square') {
          value = 'Circle'
          geometryFunction = createRegularPolygon(4)
        } else if (value === 'Box') {
          value = 'Circle'
          geometryFunction = createBox()
        } else if (value === 'Star') {
          value = 'Circle'
          geometryFunction = function (coordinates, geometry) {
            var center = coordinates[0]
            var last = coordinates[coordinates.length - 1]
            var dx = center[0] - last[0]
            var dy = center[1] - last[1]
            var radius = Math.sqrt(dx * dx + dy * dy)
            var rotation = Math.atan2(dy, dx)
            var newCoordinates = []
            var numPoints = 12
            for (var i = 0; i < numPoints; ++i) {
              var angle = rotation + (i * 2 * Math.PI) / numPoints
              var fraction = i % 2 === 0 ? 1 : 0.5
              var offsetX = radius * fraction * Math.cos(angle)
              var offsetY = radius * fraction * Math.sin(angle)
              newCoordinates.push([center[0] + offsetX, center[1] + offsetY])
            }
            newCoordinates.push(newCoordinates[0].slice())
            if (!geometry) {
              geometry = new Polygon([newCoordinates])
            } else {
              geometry.setCoordinates([newCoordinates])
            }
            return geometry
          }
        }
        this.draw = new Draw({
          source: this.source,
          type: value,
          geometryFunction: geometryFunction
        })
        // this.draw.on('drawend', function (e) {
        //   console.log('绘制结束后获取信息', e.feature.getGeometry())
        // })
        this.map.addInteraction(this.draw)
      }
    }
  }
}
</script>

<style scoped>
  .mapC{
    width: 100vw;
    height: 100vh;
  }
  .select_c{
    position: absolute;
    top: 0;
    left: 0;
  }
</style>
